<template>
    <div class="menu">
        <div class="search">
            <div class="search-logo">
                <img src="../static/images/logo.webp" alt="" srcset="" />
            </div>
            <div class="search-inp">
                <form action="/">
                    <van-search v-model="value" background="#2b4c7e" show-action placeholder="请输入搜索关键词" @search="onSearch"
                        @cancel="onCancel" />
                </form>
            </div>
        </div>
        <div class="menu-swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in images">
                    <img :src="require('@/static/images/' + item.img)" alt="" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="menu-list">
            <h3>产品列表</h3>
            <van-tabs v-model:active="active" scrollspy sticky>
                <van-tab :title="`${item.bbb}`" v-for="item in comp">
                    <component :is="item.aaa"></component>
                </van-tab>
            </van-tabs>
            <div class="menu-end">
                <p>----------------------请期待更精彩的产品--------------------</p>
            </div>
        </div>
    </div>
</template>


<style lang="scss">
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.menu {
    position: relative;
    height: 2000px;

    .search {
        display: flex;
        height: 3.4rem;
        width: 100%;
        overflow: hidden;

        .search-inp {
            width: 85%;

            .van-search__content {
                border-radius: 20px;
            }

            .van-search--show-action {
                padding-right: .5333rem
            }

            .van-search__action {
                color: #f8f8f8;
            }
        }

        .search-logo {
            width: 3.5rem;
            height: 4rem;
            background-color: $backGroundColor;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .menu-swiper {
        width: 100%;
        margin-top: .1333rem;

        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            height: 195px;
            text-align: center;

            // background-color: #39a9ed;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .menu-list {
        margin-top: .8rem;
        background-color: #fff;
        margin-bottom: 10rem;

        h3 {
            padding-left: .4rem;
            width: 6rem;
            border-left: 2px solid $backGroundColor;
        }



        .van-tabs {
            margin-top: 1rem;
            width: 100%;
            background-color: #fff;
        }

        .van-tabs__line {
            background: $backGroundColor;
            width: 4rem
        }

        .van-tab--active {
            color: $backGroundColor;
        }

        .menu-end {
            margin-top: 12rem;

            p {
                color: #8d8a8a;
            }
        }

    }
}
</style>
<script lang="ts" setup>
import store from '../store/index';
//导入产品子组件
import Top from './Coffee Product/Top.vue';
import Food from './Coffee Product/Food.vue';
import Drink from './Coffee Product/drink.vue';
import Goods from './Coffee Product/Goods.vue';
import Product from './Coffee Product/CoffeeProduct.vue';
import All from './Coffee Product/All.vue';
//导入vue相关组件
import { ref, defineComponent, reactive, markRaw } from 'vue';
//导入vant相关组件
import { showToast } from 'vant';
//导入跳转路由
import { useRoute, useRouter } from 'vue-router';
//注册子组件
defineComponent({
    Top, All, Food, Drink, Goods, Product
})
const value = ref('');
const active = ref(0);
const comp: { aaa: any, bbb: any }[] = reactive([
    { aaa: markRaw(All), bbb: '全部' },
    { aaa: markRaw(Top), bbb: '人气TOP' },
    { aaa: markRaw(Drink), bbb: '饮料' },
    { aaa: markRaw(Food), bbb: '美食' },
    { aaa: markRaw(Goods), bbb: '咖啡产品' },
    { aaa: markRaw(Product), bbb: '商品' },
]);
const router = useRouter();
const onSearch = (val: any) => {
    showToast(val);
    router.push({
        path: '/search',
        query: {
            searchName: val
        }
    })
};
const onCancel = () => showToast('取消');
const images: { img: string }[] = reactive([
    { img: "menu1.jpg" },
    { img: "menu2.webp" },
    { img: "menu3.webp" },
    { img: "menu4.webp" },
]);
</script>